*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--van-gray-1);
  color-scheme: light;
}

html.dark {
  background: #222;
  color-scheme: dark;
}

#app {
  height: 100vh;
  // Dynamic Viewport Units
  height: 100dvh;
  position: relative;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.slide-fadein-left-enter-active,
.slide-fadein-left-leave-active,
.slide-fadein-right-enter-active,
.slide-fadein-right-leave-active {
  transition:
    opacity 0.3s,
    transform 0.4s,
    -webkit-transform 0.4s;
}

.slide-fadein-left-enter-from,
.slide-fadein-right-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

.slide-fadein-left-leave-to,
.slide-fadein-right-enter-from {
  transform: translateX(-20px);
  opacity: 0;
}
